<template>
    <div class="tab-container">
      <div class="tab-header">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab"
          :class="{ active: activeTab === index }"
          @click="activeTab = index"
        >
          {{ tab.name }}
        </div>
      </div>
      <div class="tab-content">
        <!-- 性别，年龄，学历 -->
        <TArea v-if="activeTab === 0" />
        <TYear v-if="activeTab === 1" />
        <TLearning v-if="activeTab === 2" />
      </div>
    </div>
  </template>
  
  <script>
  import TArea from './TArea.vue';
  import TYear from './TYear.vue';
  import TLearning from './TLearning.vue';
  
  export default {
    components: {
      TArea,
      TYear,
      TLearning,
    },
    data() {
      return {
        activeTab: 0,
        tabs: [
          { name: '学科领域' },
          { name: '资历' },
          { name: '学历' },
        ],
      };
    },
  };
  </script>
  
  <style scoped>
  .tab-container {
    width: 100%;
    height:100%;
    font-family: Arial, sans-serif;
    /* background-color: aqua; */
  }
  
  .tab-header {
    display: flex;
    flex-direction:row-reverse;
    /* background-color: bisque; */
    /* margin-bottom: -30px; */
  }
  .tab {
    font-size: 13px;
    padding: 10px 8px;
    cursor: pointer;
  }
  
  .tab.active {
    color:#79E2F9;
    /* background-color: #ccc; */
  }
  </style>
  